{% extends 'myhome/blank.html' %}
{% block con %}
<div id="breadcrumb">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="{% url 'myhome_index' %}">首页</a></li>
            <li class="active">注册</li>
        </ul>
    </div>
</div>
<style>
    #divcs {
        margin: 0 auto;
        /* border: 1px solid #000; */
        width: 350px;
        height: 530px
    }
</style>

<form action="{% url 'myhome_doregister' %}" method="post">
    {% csrf_token %}
    <title>注册页面</title>
    <div id="divcs">
        <div class="section-title">
            <h3 class="title">注册</h3>
        </div>
        </br>
        <div class="form-group">
            <label>
                手机号<span>*</span>
            </label>
            <input class="input" required type="text" name="phone" placeholder="请输入手机号">
        </div>
        <div class="form-group">
            <label>
                密&nbsp;&nbsp;&nbsp;&nbsp;码<span>*</span>
            </label>
            <input class="input" required type="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label>
                确认密码<span>*</span>
            </label>
            <input class="input" required type="password" name="repassword" placeholder="请输入密码">
        </div>
        <div class="form-group" style="position: relative;">
            <label>
                验证码<span>*</span>
            </label>
            <input class="input" type="text" name="vcode" placeholder="请输入验证码">
            <a id="setcsp" class="primary-btn" style="position: absolute; top:25px;right: 0px;">发送手机验证码</a>
        </div>
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
        <a href="javascript:void(0)" class="btn btn-primary btn-lg btn-block" id="registermit">注册</a>
    </div>
</form>


<script src="/static/myhome/assets/js/jquery-1.12.4.min.js"></script>
<script>
    var isphone = false
    var ispass = false
    var isrepass = false
    var isclick = false
    var vcode = false
    var isvcode = false

    $('input[name=vcode]').blur(function(){
        if ($(this).val()== vcode){
            $(this).css('border','1px solid green')
            isvcode = true
        }else{
            $(this).css('border','1px solid red')
            isvcode = false
        }
    })

    $('#setcsp').click(function(){
        if (isclick){return}

        isclick = true
        if (! isphone){
            alert('请填写正确的手机号码')
            return;
        }

        isclick = true
        $(this).css('background','gray')
        $(this).text('发送手机验证码(60)')
        var time = 60
        var in1 = setInterval(function(){
            time -= 1
            // console.log(time)
            $('#setcsp').text('发送手机验证码('+time+')')
        },1000)
        setTimeout(function(){
            isclick = false
            $('#setcsp').css('background','green')
            $('#setcsp').text('发送手机验证码')
            clearInterval(in1)
        },60000)

        $.get("{% url 'myhome_shenphone' %}",{'phone':isphone},function(data){
            console.log(data)
            vcode = data['code']
        },'json')
    })

    // 给注册的a标签绑定点击事件
    $('#registermit').click(function(){
         // 找到对应的表单，触发表单事件
        $(this).parents("form").submit()
    }) 
    // 给表单绑定表单添加事件
    $('form').submit(function(){
        $('input').trigger('blur')
        if (isphone && ispass && isrepass && isvcode){
            return true
        }else{
            return false;
        }
    })
    // 给手机号绑定事件
    $('input[name=phone]').blur(function(){
        // 获取当前手机号
        phone = $(this).val()
        // 判断手机号码是否正确
        reg = /^1\d{10}$/
        if (! reg.test(phone)){
            $(this).css('border','1px solid red')
            isphone = false
        }

        $.get("{% url 'myhome_checkphone' %}",{'phone':phone},function(data){

            if (data['code'] == 0){
                isphone = true
                $('input[name=phone]').css('border','1px solid green')
            }else{
                alert(data['msg'])
                isphone = false
                $('input[name=phone]').css('border','1px solid red')
            }
        },'json')

    })
    

    // 验证密码
    $('input[name=password').blur(function(){
        // 获取当前手机号
        password = $(this).val()
        // 判断手机号码是否正确
        reg = /^\w{6,18}$/
        if (reg.test(password)){
            $(this).css('border','1px solid green')
            ispass = true
        }else{
            $(this).css('border','1px solid red')
            ispass = false
        }
    })

    // 验证确认密码
    $('input[name=repassword').blur(function(){
        // 获取当前手机号
        password = $('input[name=password').val()
        repassword = $(this).val()
        // 判断手机号码是否正确
        reg = /^\w{6,18}$/
        if (reg.test(password) && repassword == password){
            $(this).css('border','1px solid green')
            isrepass = true
        }else{
            $(this).css('border','1px solid red')
            isrepass = false
        }
    })


</script>

{% endblock %}